<template>
  <div>
    <div class="tab-wrap">
      <el-tabs v-model="active" @tab-click="handleClick">
        <el-tab-pane label="搜索" name="search">
        </el-tab-pane>
        <el-tab-pane label="所有" name="all">
        </el-tab-pane>
        <el-tab-pane label="已完成" name="ok">
        </el-tab-pane>
        <el-tab-pane label="未完成" name="no">
        </el-tab-pane>
        <el-tab-pane label="今日任务" name="day">
        </el-tab-pane>
      </el-tabs>
      <div class="add-btn">
        <el-button size="mini" @click="onAddTodo">添加新任务</el-button>
      </div>
    </div>
    <div class="search-box" v-show="active==='search'">
      <el-form ref="form" label-width="120px" label-position="left">
        <el-form-item label="完成进度">
          <el-slider v-model="pro"></el-slider>
        </el-form-item>
        <el-form-item label="重要程度">
          <el-radio-group v-model="checkList">
            <el-radio :label="0">所有任务</el-radio>
            <el-radio :label="1">普通任务</el-radio>
            <el-radio :label="2">重要任务</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-button @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="todo-list">
      <TodoItem @todoUpdate="onTodoUpdate" v-for="(item,index) in list" :key="index" :data="item"></TodoItem>
    </div>
    <AddTodo @hide="todoId=0" :visible.sync="visible" :id="todoId" />
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'
import AddTodo from './AddTodo'
import { mapState } from 'vuex'
export default {
  name: 'Todo',
  components: {
    TodoItem,
    AddTodo
  },
  data() {
    return {
      visible:false,
      todoId:0,
      active:"all",
      todoItems: [],
      searchTitle: '',
      checkList:0,
      pro:0
    }
  },
  computed: mapState({
    list(state){
        const list = state.todo.list
        if(this.active==='all'){
            return list
        }
        if(this.active==='ok'){
            return list.filter(todo=>todo.type===1)
        }
        if(this.active==='no'){
            return list.filter(todo=>todo.type!==1)
        }
        if(this.active==='day'){
            return list.filter(todo=>{
                const d = new Date()
                return todo.createTime > +new Date(d.getFullYear(),d.getMonth(),d.getDate())
            })
        }
        if(this.active==='search'){
            let searchList = list
            if(this.pro!==0){
                searchList = list.filter(todo=>{
                    return todo.pro>this.pro
                })
            }
            if(this.checkList!==0){
                searchList = searchList.filter(todo=>{
                    return todo.degree === this.checkList
                })
            }
            return searchList
        }
        return list
    }
  }),
  methods: {
      onSearch(){
          
      },
    handleClick(){

    },
    onAddTodo(){
        this.todoId = 0
        this.visible = true
    },
    onTodoUpdate(id){
        this.todoId = id
        this.visible = true
    }
  }
}
</script>

<style scoped>
.tab-wrap {
  width: 700px;
  margin: 0 auto;
  position: relative;
}
.search-box {
  width: 700px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 20px;
}
.add-btn {
  position: absolute;
  right: 0;
  top: 0;
}

.todo-list {
  width: 700px;
  margin: 0 auto;
}
</style>
